<template>
  <div>
    <!-- 小卡片 -->
    <Card :list="list" />
    <!-- 图表 -->
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script>
import Card from './component/Card.vue'
/* 图表 */
import Echarts from '@/components/Echerts/HomeEchert.vue'
/* 首页报表 */
import { totalData } from '@/api/home'
export default {
  components: {
    Card,
    Echarts
  },
  data() {
    return {
      list: [
        {
          id: 1,
          icon: 'icon-wenjian',
          title: '总订单',
          count: 'totalOrder',
          flag: false,
          num: 0
        },
        {
          id: 2,
          icon: 'icon-Dollar',
          title: '总销售额',
          count: 'totalAmount',
          flag: false,
          num: 0
        },
        {
          id: 3,
          icon: 'icon-icon-',
          title: '今日订单数',
          count: 'todayOrder',
          flag: false,
          num: 0
        },
        {
          id: 4,
          icon: 'icon-renminbi',
          title: '今日销售额',
          count: 'totayAmount',
          flag: false,
          num: 0
        }
      ],
      option: {}
    }
  },
  created() {
    this.getHomeList()
  },
  methods: {
    async getHomeList() {
      const data = await totalData()
      this.list.map(item => {
        item.num = data[item.count]
      })
      /* 更新图表数据 */
      for (const item in data) {
        /* 一定要使用动态添加  否则监听不到 */
        this.$set(this.option, item, data[item])
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
